<template>
  <!-- 程序化落地页链接( 落地页链接组 ) -->
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      row-key="group_url"
      :customRow="onClickRow"
      :row-selection="{ 
        selectedRowKeys: selectedRowKeys,
        onChange:onSelectChange,
        type:'radio'
      }"
    >
      <span slot="sites" slot-scope="text"> {{ text.length }} </span>
      <span slot="flowType" slot-scope="text"> {{ flowType(text) }} </span>
    </a-table>
  </div>
</template>

<script>
import { getSiteGroup } from "@/api/headlinesApi";

const columns = [
  {
    title: 'ID',
    dataIndex: 'group_id'
  },
  {
    title: '落地页优选组',
    dataIndex: 'group_title'
  },
  {
    title: '流量分配方式',
    dataIndex: 'group_flow_type',
    scopedSlots: { customRender: 'flowType' },
  },
  {
    title: '包含落地页个数',
    dataIndex: 'sites',
    scopedSlots: { customRender: 'sites' },
  }
]
const flowType = [
  { value: 'FLOW_DISTRIBUTION_TYPE_INTELLIGENCE',label: '智能分配' },
  { value: 'FLOW_DISTRIBUTION_TYPE_AVERAGE',label: '平均分配' }
]

export default {
  props:{
    selectAccountID:{
      typeof:String
    }
  },
  data(){
    return {
      data:[],
      columns,
      selectedRowKeys:[]
    }
  },
  watch:{
    selectedRowKeys:{
      deep:true,
      handler(params){
        this.$emit('input',params[0])
      }
    }
  },
  created(){
    this.getList()
  },
  methods:{
    async getList(){
      const res = await getSiteGroup(this.selectAccountID,{ advertiser_id:this.selectAccountID })
      this.data = res.data.list
    },
    flowType(text){
      for (const types of flowType) {
        if( text === types.value ) return types.label
      }
    },
    // 选择组
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // table点击 行 选择
    onClickRow(record) {
      return {
        on: {
          click: () => {
            let keys = [];
            keys.push(record.group_url); 
            this.selectedRowKeys = keys;
          }
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
  
</style>